import { useState } from "react";
import {connect} from 'react-redux'
import {changeCount,resetCount} from '../my-app/src/store/models/count'
import { useDispatch,useSelector } from "react-redux";
//所有use开头的函数叫Hooks，只能在函数组件的最外层调用
//特殊情况可以在封装时候使用（自定义Hooks时候）
function App() {
  //直接创建的数据不具有响应式，不能被修改
  // let count=100
  // 但是如果要实现浏览器数据持久化，则需要用localStorage搭配使用
  // Storage.getItem(key: string)
  // const [count, setCount] = useState(()=>{
  //   return localStorage.getItem('count') || 0
  // });
  // const [count, setCount] = useState(100);
//获取修改方法dispatch
const dis = useDispatch()
const count = useSelector(state=>state.count.count)

  return (
    <div className="App">
      <h1>APP</h1>
      <h1>{count}</h1>
      <button
        onClick={() => {
          // setCount(count + 1);//这样只是获得并加一，数据持久化，
          // 则需要用localStorage.setItem(key: string, value: string),由于存储后是字符串，故获取的数据也是字符串，需要用parseInt()转换成数字或者Number()转换成数字
          dis(changeCount(1))

          // setCount((prev)=>{
          // return 出去的内容是修改后的内容
          //   return prev+1
          // });
        }}
      >
        点击+1
      </button>

      <hr>
      </hr>
      <button onClick={()=>{
        dis(resetCount())

      }}>点击清空数据</button>
    </div>
  );
}

export default App;
